<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 挂载点元素 -->
    <div id="root"></div>

    <!-- 引入核心库 -->
    <!-- 开发版本 -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <script>
      /**
       * ReactDOM.render(element, container[, callback])
       *
       *    element       要渲染的 React元素（虚拟Node）
       *    container     挂载点元素
       *    callback      可选的回调函数，触发时机是在 渲染完成之后触发
       * 
       *  ReactDOM.render("Hello React", document.querySelector("#root"), () => {
            console.log("innerHTML", document.querySelector("#root").innerHTML);
          });
       *
       */

      //  1. 先创建根节点，使用 ReactDOM.createRoot()
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      //  2. 再使用创建出来的根节点root的render方法来渲染元素
      root.render("Hello React 18");
    </script>
  </body>
</html>
